<template>
    <view>
        <view class="login-title"><view>欢迎登录</view></view>
        <view class="register">
            <text>没有账号？</text>
            <text class="blue" @click="go_register">立即注册</text>
        </view>
        <view class="from">
            <view class="from-item">
                <view class="label font-28">登录账号</view>
                <input
                    class="font-28"
                    maxlength="40"
                    v-model="from.mobile"
                    type="text"
                    :placeholder="`请输入手机号${psw_login ? '/邮箱/用户ID' : '/邮箱'}`"
                    placeholder-class="placeholder"
                    @blur="getStatus"
                />
                <image class="item-img" src="../static/close_new.png" @tap="clearMobile"></image>
            </view>
            <view>
                <view class="from-item" v-if="psw_login">
                    <view class="label font-28">登录密码</view>
                    <input class="font-28 no-bor" v-model="from.password" :type="isPsw ? 'text' : 'password'" placeholder="请输入密码" placeholder-class="placeholder" />
                    <image class="item-img" :src="isPsw ? pswYes : pswNo" @tap="isPsw = !isPsw"></image>
                </view>
                <view v-else>
                    <picker :range="list" range-key="area_name" @change="picker_change">
                        <view class="from-item">
                            <view class="font-30 label">归属地</view>
                            <view
                                class="font-30"
                                :style="{
                                    textAlign: 'left',
                                    flex: 1,
                                    color: area_name ? '#333333' : 'grey'
                                }"
                            >
                                {{ area_name ? area_name : '号码归属地' }}
                            </view>
                        </view>
                    </picker>
                    <view class="from-item rel">
                        <view class="label font-28">验证码</view>
                        <input class="font-28" v-model="from.mobile_code" type="number" maxlength="4" placeholder="验证码" placeholder-class="placeholder" />
                        <vercode class="right" v-model="from.mobile" :timeout="timeout" :area="area"></vercode>
                    </view>
                    <view class="from-item" v-if="isNewUser">
                        <view class="label font-28">邀请码</view>
                        <input class="font-28 no-bor" v-model="from.invite" placeholder="請輸入邀请码" placeholder-class="placeholder" />
                    </view>
                </view>
            </view>
            <view class="psw-login">
                <text @click="psw_login = !psw_login">{{ psw_login ? '验证码登录' : '密码登录' }}</text>
                <text class="forget-psw" @tap="go_forget">忘记密码</text>
            </view>
        </view>
        <view class="buttom font-32" @tap="save">登录</view>
        <!-- <login-modal ref="loginMoal" @confirm="loginConfirm"></login-modal> -->
        <!-- <view class="wx-login">
			<view class="wx-title">
				<view class="line"></view>
				<text>使用第三方登录</text>
				<view class="line"></view>
			</view>
			<view class="logo-box" @click="wx_login">
				<image src="../static/wx_logo.png"></image>
				<text>微信</text>
			</view>
		</view> -->
    </view>
</template>

<script>
import vercode from '@/components/get_verification.vue'
export default {
    data() {
        return {
            from: {
                mobile: '',
                password: '',
                mobile_code: '',
                invite: ''
            },
            area: '',
            area_name: '',
            list: [],
            timeout: 0,
            psw_login: true,
            isPsw: false,
            pswNo: '../static/psw_no.png',
            pswYes: '../static/psw_yes.png',
            isNewUser: false
        }
    },
    computed: {
        isEmail() {
            const $email = /^([a-zA-Z\d])((\w|-)+\.?)+@([a-zA-Z\d]+\.)+[a-zA-Z]{2,6}$/
            return $email.test(this.from.mobile)
        }
    },
    mounted() {
        this.$http('get|api/Api/send_validate_code').then(res => {
            this.list = res.result.country_area
            this.timeout = +res.result.sms_time_out
        })
    },
    methods: {
        getStatus() {
            if (this.psw_login || !this.from.mobile) {
                return
            }
            this.$http('post|api/Api/issetMobile', {
                mobile: this.from.mobile
            })
                .then(res => {
                    if (res.status == 1) {
                        this.isNewUser = true
                    }
                })
                .catch(() => {
                    this.isNewUser = false
                })
        },
        clearMobile() {
            this.from.mobile = ''
        },
        async checkFirstLogin() {
            uni.showLoading({
                mask: true
            })
            const res = await this.$http('post|api/user/checkFirstLogin', {
                mobile: this.from.mobile
            }).finally(() => {
                uni.hideLoading()
            })
            return res
        },
        do_login(data = {}) {
            uni.showLoading({
                mask: true
            })
            this.$http('post|api/User/do_login', {
                // #ifdef APP-PLUS
                push_id: plus.push.getClientInfo().clientid,
                // #endif
                ...data
                // mobile: this.from.mobile,
                // password: this.from.password,
                // mobile_code: this.from.mobile_code,
                // invite: this.from.invite
            })
                .finally(() => {
                    uni.hideLoading()
                })
                .then(res => {
                    this.$store.commit('login', res.result)
                    this.$toastApp(res.msg)
                    setTimeout(() => {
                        uni.navigateBack()
                        // uni.switchTab({
                        //     url: '/pages/my'
                        // })
                    }, 1000)
                })
                .catch(err => {
                    this.$toastApp(err.msg)
                })
        },
        code_login(data = {}) {
            uni.showLoading({
                mask: true
            })
            this.$http('post|api/User/code_login', {
                // #ifdef APP-PLUS
                push_id: plus.push.getClientInfo().clientid,
                // #endif
                ...data
                // mobile: this.from.mobile,
                // password: this.from.password,
                // mobile_code: this.from.mobile_code,
                // invite: this.from.invite
            })
                .finally(() => {
                    uni.hideLoading()
                })
                .then(res => {
                    this.$store.commit('login', res.result)
                    this.$toastApp(res.msg)
                    setTimeout(() => {
                        uni.navigateBack()
                        // uni.switchTab({
                        //     url: '/pages/my'
                        // })
                    }, 1000)
                })
                .catch(err => {
                    this.$toastApp(err.msg)
                })
        },
        passwordSubmit() {
            if (!this.from.mobile) {
                this.$toastApp('请输入登录账号')
                return
            }
            if (!this.from.password) {
                this.$toastApp('请输入登录密码')
                return
            }
            const data = {
                mobile: this.from.mobile,
                password: this.from.password
            }
            this.do_login(data)
        },
        codeSubmit() {
            if (!this.from.mobile) {
                this.$toastApp('请输入登录账号')
                return
            }
            if (!this.from.mobile_code) {
                this.$toastApp('请输入验证码')
                return
            }
            const data = {
                mobile: this.from.mobile,
                mobile_code: this.from.mobile_code,
                invite: this.from.invite
            }
            this.code_login(data)
        },
        save() {
            if (this.psw_login) {
                this.passwordSubmit()
            } else {
                this.codeSubmit()
            }
        },
        loginConfirm() {
            this.save()
        },
        go_register() {
            uni.redirectTo({
                url: '/pages/register'
            })
        },
        go_forget() {
            uni.navigateTo({
                url: '/pages/forgetPSW?type=2'
            })
        },
        picker_change(e) {
            let index = e.detail.value
            this.area = this.list[index].area
            this.area_name = this.list[index].area_name
        },
        wx_login() {
            uni.showLoading({
                title: '登錄中'
            })
            uni.login({
                provider: 'weixin',
                success: loginRes => {
                    // this.$toastApp(loginRes);
                    // console.log(loginRes)
                    // 获取用户信息
                    uni.getUserInfo({
                        provider: 'weixin',
                        success: infoRes => {
                            console.log('用户昵称为：' + infoRes.userInfo.nickName)
                            console.log('头像：' + infoRes.userInfo.avatarUrl)
                            console.log('unionid：' + loginRes.authResult.unionid)
                            console.log('openId：' + infoRes.userInfo.openId)

                            this.$http('post|api/User/bind_guide', {
                                nickname: infoRes.userInfo.nickName,
                                head_pic: infoRes.userInfo.avatarUrl,
                                unionid: loginRes.authResult.unionid,
                                openid: infoRes.userInfo.openId
                            })
                                .then(res => {
                                    this.$toastApp(res.msg)
                                    setTimeout(() => {
                                        uni.navigateBack()
                                    }, 500)
                                })
                                .catch(err => {
                                    this.$toastApp(err.msg)
                                    if (err.status == -1) {
                                        setTimeout(() => {
                                            uni.redirectTo({
                                                url: '/pages/bind_account'
                                            })
                                        }, 500)
                                    }
                                })
                        }
                    })
                }
            })
        }
    },
    components: {
        vercode
    }
}
</script>

<style lang="scss">
.login-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 66rpx;
    font-size: 48rpx;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    text-align: left;
    color: #313133;
    line-height: 66rpx;
    // padding: 0 20rpx;
    margin-left: 60rpx;

    .language-box {
        // position: absolute;
        // top: 24rpx;
        // right: 20rpx;
        display: flex;
        align-items: center;
        margin-right: 20rpx;

        .language-item {
            margin-left: 20rpx;
        }

        .checks {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24rpx;
            color: #333333;

            image {
                width: 32rpx;
                height: 32rpx;
            }

            text {
                margin-left: 10rpx;
            }
        }

        .check-box {
            position: absolute;
            z-index: 9999;
            width: 120rpx;
            margin-top: 6rpx;
            background-color: #ffffff;
            border: 2rpx solid #cccccc;

            .check-item {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 60rpx;
                color: #333333;
                font-size: 24rpx;

                image {
                    width: 24rpx;
                    height: 24rpx;
                    border-radius: 50%;
                    margin-right: 4rpx;
                }
            }
        }
    }
}

.register {
    height: 36rpx;
    font-size: 26rpx;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #919298;
    line-height: 36rpx;
    margin-left: 60rpx;
    margin-top: 14rpx;

    .blue {
        color: var(--theme);
    }
}

.psw-login {
    position: relative;
    height: 36rpx;
    font-size: 26rpx;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #919298;
    line-height: 36rpx;
    margin-top: 24rpx;

    .forget-psw {
        position: absolute;
        right: 0;
        padding: 10rpx;
    }
}

.from {
    padding: 60rpx;
    padding-bottom: 0;
    box-sizing: border-box;

    .rel {
        position: relative;
    }

    .right {
        position: absolute;
        right: 0;
    }

    .from-item {
        display: flex;
        border-bottom: 1rpx solid #f2f3f6;
        height: 100rpx;
        width: 630rpx;
        align-items: center;
        position: relative;

        .label {
            width: 140rpx;
        }

        .placeholder {
            color: #d7d7d9;
        }

        input {
            width: 60%;
        }

        .no-bor {
            border: none;
            outline: none;
        }

        .item-img {
            position: absolute;
            top: 50%;
            right: 20rpx;
            transform: translateY(-50%);
            width: 36rpx;
            height: 36rpx;
        }

        .isChoose {
            width: 80%;
            height: 100%;
            line-height: 100rpx;
        }
    }
}

.buttom {
    width: 630rpx;
    height: 100rpx;
    background: var(--theme);
    border-radius: 50rpx;
    text-align: center;
    line-height: 100rpx;
    margin: 0 auto;
    margin-top: 60rpx;
    color: #ffffff;
}

.wx-login {
    position: absolute;
    bottom: 60rpx;
    left: 0;
    right: 0;

    .line {
        display: inline-block;
        width: 122rpx;
        height: 4rpx;
        vertical-align: middle;
        background-color: #d7d7d7;
    }

    .wx-title {
        // display: inline-block;
        font-size: 28rpx;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        // text-align: left;
        color: #b9b9b9;
        line-height: 40rpx;
        letter-spacing: 1rpx;
        text-align: center;

        text {
            padding: 0 20rpx;
        }
    }

    .logo-box {
        margin-top: 70rpx;
        text-align: center;

        image {
            width: 68rpx;
            height: 68rpx;
        }

        text {
            display: block;
            font-size: 26rpx;
            font-family: PingFangSC, PingFangSC-Medium;
            font-weight: 500;
            text-align: center;
            color: #999999;
            line-height: 36rpx;
            letter-spacing: -1px;
        }
    }
}
</style>
